class Index {
  json = [{
    'id': 1,
    "src": "http://127.0.0.1/zuijia/hzzj/img/temp/bz01.jpg",
    "price": 19.00,
    "name": "创意现代简约抱枕1",
    "sale": 45
  }, {
    'id': 2,
    "src": "http://127.0.0.1/zuijia/hzzj/img/temp/bz02.jpg",
    "price": 29.00,
    "name": "创意现代简约抱枕2",
    "sale": 69
  }, {
    'id': 3,
    "src": "http://127.0.0.1/zuijia/hzzj/img/temp/bz03.jpg",
    "price": 39.00,
    "name": "创意现代简约抱枕3",
    "sale": 78
  }, {
    'id': 4,
    "src": "http://127.0.0.1/zuijia/hzzj/img/temp/bz04.jpg",
    "price": 49.00,
    "name": "创意现代简约抱枕4",
    "sale": 92
  }, {
    'id': 5,
    "src": "http://127.0.0.1/zuijia/hzzj/img/temp/bz05.jpg",
    "price": 49.00,
    "name": "创意现代简约抱枕5",
    "sale": 59
  }, {
    'id': 6,
    "src": "http://127.0.0.1/zuijia/hzzj/img/temp/bz06.jpg",
    "price": 59.00,
    "name": "创意现代简约抱枕6",
    "sale": 92

  }, {
    'id': 7,
    "src": "http://127.0.0.1/zuijia/hzzj/img/temp/bz07.jpg",
    "price": 69.00,
    "name": "创意现代简约抱枕7",
    "sale": 80
  }, {
    'id': 8,
    "src": "http://127.0.0.1/zuijia/hzzj/img/temp/bz08.jpg",
    "price": 79.00,
    "name": "创意现代简约抱枕8",
    "sale": 87
  }];
  constructor() {
    window.onscroll = this.lr.bind(this);
    this.getGoods();
  }
  /**********渲染页面的数据*******/
  // 需求:页面加载进来,就要渲染数据
  getGoods(data) {
    var tmpData = data || this.json;
    let str = '';
    tmpData.forEach(ele => {
      //console.log(ele)
      //1 获取对象中的name,img,price等数据
      let {
        id,
        src,
        price,
        name,
      } = ele;
      // 2 拼接到html中
      str += `<div class="goodsCon"><a target = "_blank" >
      <img src="${src}" class="icon"><h4 class="title">${name}</h4>
      <div class="info">限时抢购5件</div></a><div class="priceCon">
      <span class="price">￥${price}</span>
      <span class="oldPrice">￥${(price * 1.2).toFixed(2)}</span>
      <a class="button" target="_blank" onclick="indexData.addCart(${id},'${name}','${src}','${price}',1)">
      立即抢购</a></div></div>`;
    });
    // 3 将拼接的数据追加到页面中
    $('.proList').append(str);
    // document.querySelector('.proList').innerHTML+=str;
  }
  /********商品加入购物车*****/
  addCart(id, name, src, price, num) {
    // console.log(1111);
    console.log(id,name,src,price,num);
    // 1 判断有没有carts,即购物车是否有数据
    let cartGoods = localStorage.getItem('carts');
    // 2-1 有数据,则判断该商品是否存在
    if (cartGoods) {
      // 将购物车数据转化为对象
      cartGoods = JSON.parse(cartGoods);
      // console.log(cartGoods);
      // 2-1-1  设置商品是否存在的状态
      let state = true;
      cartGoods.forEach(ele => {
        // 2-2  当前添加的商品存在就增加数量
        if (ele.gid == id) {
          // 商品数量增加了,就更改状态
          ele.gnum = ele.gnum - 0 + num;
          state = false;
        }
      });
      // console.log(cartGoods);
      // 2-3不存在就新增一条数据
      if (state) {
        let goodsObj = {
          gid: id,
          gname: name,
          gsrc: src,
          gprice: price,
          gnum: 1
        };
        cartGoods.push(goodsObj);
      }
      // 2-4将数据转化为json,存储
      localStorage.setItem('carts', JSON.stringify(cartGoods));
    } else {
      // 3-1没有数据,新增购物车数据
      // 3-1-1一条商品信息,就是一个对象
      let goodsObj = {
        gid: id,
        gname: name,
        gsrc: src,
        gprice: price,
        gnum: num
      };
      // 3-1-2 声明数组carts,保存单个商品数据对象
      let cartsArr = [];
      cartsArr.push(goodsObj);
      // console.log(cartsArr);
      // 3-2 保存到localstorage中
      localStorage.setItem('carts', JSON.stringify(cartsArr));
    }
  }
  // 懒人加载
  // 绑定滚动事件
  lr() {
    // console.log(6666);
    // 获取内容的高度
    var ct = all('.goodsCon')[all('.goodsCon').length - 1].offsetTop;
    var st = this.getScTop();
    var clintTop = this.getClient().h;
    // 内容的高度<可视区的高度+滚动条的高度,就需要重新加载数据
    if (ct < (st + clintTop)) {
      // console.log(ct);
      this.get('./data/server.php', res => {
        this.getGoods(JSON.parse(res));
      });
    }
  }
  // 可视区高度,宽度
  getClient() {
    return {
      h: window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
      w: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth
    }
  }
  // 滚动条高度
  getScTop() {
    return window.pageYOffset || document.body.scrollTop;
  }
  // get请求方式
  get(url, cb) {
    let xhr = new XMLHttpRequest();
    // 2打开请求资源
    // xhr.open('get', 'get.php');  // 第一个参数是请求的方式,第二个是请求地址
    xhr.open('get', url);
    // 3 发送请求
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        // 存在并且调用
        cb && cb(xhr.response);
      }
    };
  }
}
let indexData = new Index();